<template>
  <section class="p-container" v-cloak>
    <div class="info-title">{{ payName }}-{{ className }}</div>
    <div class="data-t">
      <span>班级总人数：{{ statistics.shouldPaystudentNum }}人</span>
      <span>已缴费人数：{{ statistics.studentNum }}人</span>
      <span>未缴费人数：{{ statistics.noPaystudentNum }}人</span>
    </div>
    <el-row>
      <el-tabs v-model="activeName" @tab-click="tabChange">
        <el-tab-pane label="全部" name="0"></el-tab-pane>
        <el-tab-pane label="已缴费" name="2"></el-tab-pane>
        <el-tab-pane label="未缴费" name="1"></el-tab-pane>
      </el-tabs>
    </el-row>
    <el-row type="flex" justify="end">
      <el-button icon="self-daochu" size="small" @click="exportData" class="blue">导出</el-button>
    </el-row>
    <el-row>
      <ctable :thead="payThead" :table-data="lists" :options="payOpt" :page-data="pageObj" all-align="center" :opt-width="80"></ctable>
    </el-row>
  </section>
</template>

<script>
import { getPayedLists, getCountInfo } from 'api/school/payManage/index'
import ctable from 'components/common/ctable'
import common from 'src/util/common'
export default {
  data () {
    return {
      payThead: [{ // ctable组件头
        name: '姓名',
        prop: 'name',
        width: 120
      }, {
        name: '证件号码',
        prop: 'cardNo'
      }, {
        name: '班级',
        prop: 'className'
      }, {
        name: '缴费项目',
        prop: 'schoolPaymentSkuName'
      }, {
        name: '应缴费金额',
        prop: 'shouldPay',
        format: this.priceFilter
      }, {
        name: '已缴费金额',
        prop: 'price',
        format: this.priceFilter
      }],
      payOpt: [{
        name: '详情',
        callback: this.toDetail
      }],
      statistics: {}, // 统计数据
      lists: [], // 数据列表
      pageObj: { // 分页
        page: {},
        callback: this.getData
      },
      activeName: '0', // tab激活flag
      paymentId: Number(common.params('paymentId')), // 缴费项目id
      classId: Number(common.params('classId')), // 班级id
      payName: common.params('payName'), // 缴费项目名称
      className: common.params('className') // 班级名称
    }
  },
  created () {
    // 获取统计数据
    getCountInfo({
      schoolPaymentSkuId: this.paymentId,
      payStatus: Number(this.activeName),
      classId: this.classId
    }).then(res => {
      this.statistics = res.data
    })
    this.getData(1)
  },
  components: {
    ctable
  },
  methods: {
    getData (int) { // 获取数据
      getPayedLists({
        page: int,
        count: 15,
        schoolPaymentSkuId: this.paymentId,
        payStatus: Number(this.activeName),
        classId: [this.classId]
      }).then(res => {
        this.lists = res.data || []
        this.pageObj.page = res.page
      })
    },
    toDetail (obj) { // 详情
      this.$router.push({name: 'progressDetail', query: {id: obj.id}})
    },
    search () { // 搜索
      this.getData(1)
    },
    exportData () { // 导出
      window.open(`/net/schooladmin/school-order/exports-pay-info?schoolPaymentSkuId=${this.paymentId}&payStatus=${Number(this.activeName)}&classId=${this.classId}&login-key=${window.localStorage.loginKey}`)
    },
    tabChange () { // tab标签切换
      this.getData(1)
    },
    priceFilter (row, col, value) { // 价格处理
      return '¥' + (value / 100).toFixed(2)
    }
  }
}
</script>
<style lang="less">
.p-container {
  padding: 15px 25px 0;
  .el-tabs__item {
    font-size: 14px;
  }
  .info-title {
    border-bottom: 1px solid #ccc;
    padding-bottom: 6px;
    padding-left: 10px;
    font-size: 18px;
    color: #666;
  }
  .data-t {
    margin: 15px 0;
    padding-left: 10px;
    font-size: 14px;
    color: #20a0ff;
    span {
      margin-right: 10px;
    }
  }
}
</style>

